<template>
	<view class="credit-page">
		<!-- 列表 -->
		<view class="record-list" v-if="records.length > 0">
			<!-- <view class="list-title">推广费明细</view> -->
			<view class="record-item" v-for="(item, index) in records" :key="index">
				<view class="item-left">
					<text class="record-type">微信</text>
					<text class="record-time">{{ item.created_at }}</text>
				</view>
				<view class="item-right" @click="handleStatus(item)">
					<text>{{ item.amount }}</text>
					<view class="status-box">
						<text :style="{ color: '#fff', background: item.status == 1 ? '#52C41A' : '#FF4D4F' }">{{ statusMap[item.status] }}</text>
					</view>
				</view>
			</view>
		</view>
		<empty-data v-else defaultText="暂无数据" />
	</view>
</template>

<script>
import { duration } from 'moment';

export default {
	// 0-待支付，1-用户待确认，2-用户已确认（转账成功），3-转账失败，4-撤销转账，5-异常状态（数据会填充到remark）
	data() {
		return {
			page: 1,
			size: 20,
			records: [],
			statusMap: {
				0: '待转账',
				1: '待确认',
				2: '已确认',
				3: '转账失败',
				4: '撤销转账',
				5: '异常状态'
			}
		};
	},
	onLoad() {
		this.getPromotionLog();
	},
	methods: {
		async getPromotionLog() {
			try {
				let params = {
					page: this.page,
					size: this.size
				};
				const data = await this.$http.get('/h5/user/wallet/promotionLog', params);
				this.records = data.data.list && data.data.list;
				// .map(item => {
				//     return {
				//         // type: item.channel_text,
				//         value: item.amount,
				//         time: item.created_at,
				//         status: item.status,
				//     }
				// })
			} catch (error) {}
		},
		isWeiXin() {
			return /micromessenger/i.test(navigator.userAgent);
		},
		handleStatus(item) {
			const that = this;
			if (item.status == 1) {
				if (this.isWeiXin()) {
					uni.showLoading({ mask: true });
					wx.ready(function () {
						wx.invoke(
							'requestMerchantTransfer',
							{
								mchId: item.mch_id,
								appId: item.app_id,
								package: item.package_info
							},
							function (res) {
								uni.hideLoading();

								// uni.showModal({
								// 	content: JSON.stringify(res)
								// });

								// 处理回调结果
								if (res && res.err_msg === 'requestMerchantTransfer:ok') {
									uni.showToast({
										title: '收款成功',
										icon: 'success',
										duration: 2000
									});
									that.$http.get('/h5/user/wallet/getUserConfirmPayment/' + item.id).finally((res) => {
										location.reload();
									});
								} else if (res && res.err_msg === 'requestMerchantTransfer:cancel') {
									uni.showToast({
										title: '您已取消收款',
										icon: 'none',
										duration: 2000
									});
								} else {
									uni.showToast({
										title: res && res.err_msg ? '转账失败：' + res.err_msg : '转账失败',
										icon: 'none'
									});
								}
							}
						);
					});
				} else {
					uni.showToast({
						title: '请在微信中打开',
						icon: 'none'
					});
				}
			}
		},
		// 导航到指定页面
		navigateTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.credit-page {
	padding: 20rpx 26rpx;
}

.record-list {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 0 40rpx;
}

.list-title {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 28rpx;
	color: #0b1f20;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #eee;
}

.record-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 46rpx 0 24rpx 0;
	border-bottom: 1rpx solid #eee;
}

.record-item:last-child {
	border-bottom: none;
}

.item-left {
	display: flex;
	flex-direction: column;
}

.record-type {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 28rpx;
	color: #0b1f20;
	line-height: 50rpx;
}

.record-time {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 28rpx;
	color: #afb5be;
	line-height: 50rpx;
}

.item-right {
	text-align: center;

	text {
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		font-size: 32rpx;
		color: #0b1f20;
		line-height: 50rpx;
	}

	.status-box {
		text {
			display: inline-block;
			width: 100rpx;
			height: 40rpx;
			line-height: 38rpx;
			border-radius: 10rpx;
			padding: 0 8rpx;
			font-size: 24rpx;
		}
	}
}
</style>